// 封装函数
// Message({type:'success',text:'登录成功'})
// Message.success('登录成功')      //this.$message.success('成功')
// Message.error('登录失败') 
import XtxMessage from './message.vue'
import {h, render} from 'vue'

type props = {
    type: 'success' | 'error' | 'warning'
    text: string
    duration?: number
}

// <XtxMessage type='success'>text</XtxMessage>
// <XtxMessage type='success' text='成功'></XtxMessage>

// 创建容器,装vNode
const div = document.createElement('div')
div.setAttribute('class',"xtx-message-container")
document.body.appendChild(div)

function Message({type,text,duration=2000}:props){
    const vNode = h(XtxMessage,{type,text})
    render(vNode,div)
    // 延时器
    setTimeout(()=>{
        render(null,div)
    },duration)
}

Message.success = (text:string,duration=2000)=>{
    Message({
        type:'success',
        text,
        duration
    })
}

Message.error = (text:string,duration=2000)=>{
    Message({
        type:'error',
        text,
        duration
    })
}

Message.warning = (text:string,duration=2000)=>{
    Message({
        type:'warning',
        text,
        duration
    })
}


export default Message